<script>
import { defineComponent, watch } from "vue";
import data from "../../assets/data"
import { useRouter } from 'vue-router'
// import * as GC from "@grapecity/spread-sheets";
// 截取Object数据
function pickByIndex(obj, startIndex, endIndex) {
    const keys = Object.keys(obj);
    const pickedKeys = keys.slice(startIndex, endIndex + 1);
    return pickedKeys.reduce((result, key) => {
        result[key] = obj[key];
        return result;
    }, {});
}
export default defineComponent({
    name: "App",
    setup() {
        let spread = null;
        let router = useRouter()
        let compare = false;
        let dataSource = null;
        return {
            spread,
            router,
            compare,
            dataSource
        }
    },
    data: function () {
        return {
            styleInfo: { height: "calc(100vh - 90px)", width: "100%" },
        };
    },
    methods: {
        workbookInitialized(value) {
            this.spread = value
            let tem = this.router.currentRoute.value.query.template;
            let temJson = sessionStorage.getItem(tem);
            this.spread.fromJSON(JSON.parse(temJson));
            debugger;
        },
        // 根据模板行列总数，动态处理数据源
        processBindData() {
            this.dataSource = JSON.parse(JSON.stringify(data));
            delete this.dataSource.test;
            let test1, test2, test3, test4
            // 实际项目中需要根据模板行列判断是否需要分页
            if (data.test.length > 20 && Object.keys(data.test[0]).length > 7) {
                test1 = data.test.slice(0, 20);
                test1.forEach((item, index) => {
                    test1[index] = pickByIndex(item, 0, 6)
                })
                this.dataSource.test1 = test1;
                test2 = data.test.slice(0, 9).concat(data.test.slice(20, data.test.length));
                test2.forEach((item, index) => {
                    test2[index] = pickByIndex(item, 0, 6)
                })
                this.dataSource.test2 = test2;
                test3 = data.test.slice(0, 20);
                test3.forEach((item, index) => {
                    test3[index] = Object.assign(pickByIndex(item, 0, 1), pickByIndex(item, 7, 8))
                })
                this.dataSource.test3 = test3;
                test4 = data.test.slice(0, 9).concat(data.test.slice(20, data.test.length));
                test4.forEach((item, index) => {
                    test4[index] = Object.assign(pickByIndex(item, 0, 1), pickByIndex(item, 7, 8))
                })
                this.dataSource.test4 = test4;
                console.log(this.dataSource);
                this.templatePagination();
            }
            // })
        },
        templatePagination() {
            let sheetJSON = this.spread.getSheet(0).toJSON();
            for (let i = 1; i < 5; i++) {
                if (i == 1) {
                    this.spread.removeSheet(0)
                    // this.spread.de
                }
                let newSheet = new GC.Spread.Sheets.Worksheet("第" + i + "页");
                this.spread.addSheet(this.spread.getSheetCount(), newSheet);
                debugger;
                newSheet.fromJSON(sheetJSON);
                newSheet.name("第" + i + "页");
                newSheet.setValue(1, 6, "共4页，第" + i + "页");
                var tableColumns = [],
                    names = Object.keys(this.dataSource[`test${i}`][0]),
                    labels = Object.keys(this.dataSource[`test${i}`][0]);
                var table = newSheet.tables.add(`test${i}`, 6, 0, this.dataSource[`test${i}`].length + 1, Object.keys(this.dataSource[`test${i}`][0]).length);
                // var table = newSheet.tables.all()[0];
                table.autoGenerateColumns(false);
                names.forEach(function (name, index) {
                    var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
                    tableColumn.name(labels[index]);
                    tableColumn.dataField(name);
                    tableColumns.push(tableColumn);
                });

                table.bindColumns(tableColumns);
                table.bindingPath(`test${i}`);
                // table.expandBoundRows(true)
                table.style(GC.Spread.Sheets.Tables.TableThemes.none);
                table.filterButtonVisible(false);
                let source = new GC.Spread.Sheets.Bindings.CellBindingSource(this.dataSource);
                newSheet.setDataSource(source);
                const sRange = new GC.Spread.Sheets.Range(7, 3, 1, 1);
                const fRange = new GC.Spread.Sheets.Range(7, 3, this.dataSource[`test${i}`].length, 1);
                newSheet.fillAuto(sRange, fRange, {
                    fillType: GC.Spread.Sheets.Fill.FillType.auto,
                    series: GC.Spread.Sheets.Fill.FillSeries.column,
                    fillDirection: GC.Spread.Sheets.Fill.FillDirection.down,
                });
                newSheet.options.showZeros = false;
                // if (Object.keys(this.dataSource[`test${i}`][0]).length < 7) {
                //     table.deleteColumns(4, 3)
                // }

            }
        },
        // 打印
        templatePrint() {
            this.spread.print();
        },
        async handleCompare() {
            debugger;
            let bas = JSON.parse(sessionStorage.getItem("basicObject")).bas
            let cha = JSON.parse(sessionStorage.getItem("challengeObject")).cha

            let data = {
                ver: [

                ]
            };
            bas.forEach((item, index) => {
                data.ver.push(Object.assign(bas[index], cha[index]))

            });
            let sheet = this.spread.getActiveSheet()
            let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
            sheet.setDataSource(source);
        }
    },

});
</script>

<template>
    <div class="flex-right" style="margin-right: 50px">
        <el-button type="success" class="save-button" v-show="compare" @click="handleCompare">版本对比</el-button>
        <el-button type="success" class="save-button" @click="processBindData">导入检测数据</el-button>
        <el-button type="success" class="save-button" @click="templatePrint">打印</el-button>
    </div>
    <div>
        <gc-spread-sheets :hostStyle="styleInfo" @workbookInitialized="workbookInitialized" />
    </div>
</template>

<style>
.save-button {
    background-color: #f28e41;
    border-color: #ffb852;
    padding: 10px 18px;
    font-size: 14px;
}

.flex-right {
    display: flex;
    justify-content: flex-end;
}
</style>